<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse="collapse"
    :router='true'
  >
    <h5>后台管理系统</h5>
    <template v-for="item of routers">
      <el-submenu :key="item.path" v-if="item.children && item.children.length > 1" :index='item.path'>
        <template slot="title">
          <i :class="item.meta.icon"></i>
          <span>{{item.meta.name}}</span>
          </template>
          <el-menu-item v-for="items of item.children.slice(1)" :key="items.path" :index='items.path'>
            <i :class="items.meta.icon"></i>
            <span>{{items.meta.name}}</span>
          </el-menu-item>
      </el-submenu>
      <el-menu-item :key="item.path" v-else :index="item.path">
        <i :class="item.meta.icon"></i>
        <span>{{item.meta.name}}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>
 
<script>
import { mapState } from "vuex";
export default {
  name: "menus",
  props: {
    collapse: Boolean
  },
  computed: mapState(["routers"])
};
</script>


<style lang="sass">
.el-menu
  height: inherit
  border-right: 0
</style>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}
h5 {
  padding-left: 20px;
  font-size: 20px;
  color: #ffffff;
}
</style>